<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="bg_title">
			
		</view>
		<!-- #endif -->
		<view class="bg_title">
			<view class="title">
				我的购物车
			</view>
		</view>
		<view class="login_to" v-if="!login" @click="navTo('../public/login')">
			去登录>>
		</view>
		<view class="cart" v-if="cart_list.length > 0 && login">
			<view class="list" v-for="(item,index) in cart_list">
				<view class="list_title">
					<view class="list_title_title">
						{{item.product_additional.admin_name}}旗舰店<text class="iconfont icon-enter"></text>
					</view>
					<view class="list_title_icon" @click="del_cart(item)">
						<text class="iconfont icon-trash"></text>
					</view>
				</view>
				<view class="product">
					<view class="product_radio">
						<view :class="JSON.stringify(radio_selectArr).indexOf(item._id) == -1 ? 'radio' :'radio_active'" @click="radio_select(item._id)"></view>
					</view>
					<view class="product_image" @click="navTo('../product/index?_id='+item.product_id)">
						<image :src="item.product_title_image" mode="scaleToFill"></image>
					</view>
					<view class="product_desc">
						<view class="product_desc_name">
							{{item.product_name}}
						</view>
						<view class="product_list_option">
							<text>{{item.product_option.list0_name}} {{item.product_option.list1_name || ''}}</text>
						</view>
						<view class="product_list_l">
							<view class="price">
								￥{{item.product_price}}
							</view>
							<view class="product_btn">
								<button type="default" @click="del_number(item,index)">-</button>
								<input type="text" v-model="item.product_number" />
								<button type="default" @click="add_number(item,index)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="toResult">
				<view class="toResult_all">
					<text v-if="radio_selectArr.length != cart_list.length" @click="radio_select_all">全选</text>
				</view>
				<view class="toResult_btn">
					<view class="count">
						合计:<text>{{count_price.toFixed(2)}}</text>
					</view>
					<view class="button">
						<button type="primary" @click="navTo_create()">去结算</button>
					</view>
				</view>
			</view>
		</view>
		<view class="login_to" v-if="cart_list.length == 0 && login">
			购物车空空如也
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return {
				login: false,
				cart_list:[],
				user_id: 0,
				radio_selectArr:[],
				count_price: 0
			}
		},
		onShow() {
			this._load();
		},
		methods: {
			_load(){
				let userinfo = uni.getStorageSync('userInfos');
				if(!userinfo){
					this.login = false
				}else {
					this.user_id = userinfo._id;
					this.login = true;
					let radio_se = uni.getStorageSync('radio_selectArr');
					if(radio_se){
						this.radio_selectArr = JSON.parse(radio_se);
					}
					this.cart_load();
				}
			},
			async cart_load(e){
				if(e != 0){
					this.cart_list = uni.getStorageSync('cart_list');
				}
				let params = {
					cart_type: 1,
					user_id: this.user_id
				}
				let res = await api.uniCloudApi(api.publicFun.cart,params);
				this.cart_list = res;
				uni.setStorageSync('cart_list',res);
				this.cout_price();
			},
			async add_number(item,index){
				item.cart_type = 2
				item.product_number += 1;
				let res = await api.uniCloudApi(api.publicFun.cart,item)
				if(res.updated == 1){
					// this.cart_list[index].product_number += 1;
					this.cart_load(0)
				}
			},
			async del_number(item,index){
				if(this.cart_list[index].product_number == 1){
					this.del_cart();
					return
				}
				item.cart_type = 2
				item.product_number -= 1;
				let res = await api.uniCloudApi(api.publicFun.cart,item)
				if(res.updated == 1){
					this.cart_load(0)
				}
			},
			async del_cart(item){
				let that = this;
				uni.showModal({
					content:'确定删除吗？',
					async success(e) {
						if(e.confirm){
							let params = {
								cart_type: 3,
								_id: item._id
							}
							let res = await api.uniCloudApi(api.publicFun.cart,params);
							if(res.deleted){
								uni.showToast({
									icon:'none',
									title:'删除成功'
								})
								that.cart_load(0);
							}
						}
					}
				})
			},
			radio_select(name,index){
				if(JSON.stringify(this.radio_selectArr).indexOf(name) == -1){
					this.radio_selectArr.push(`${name}`);
				}else{
					for(let i in this.radio_selectArr){
						if(this.radio_selectArr[i] == name){
							this.radio_selectArr.splice(i,1)
							break;
						}
					}
				}
				this.cout_price();
				uni.setStorage({
					key:'radio_selectArr',
					data:JSON.stringify(this.radio_selectArr)
				})
			},
			radio_select_all(){
				this.radio_selectArr = [];
				for(let h in this.cart_list){
					this.radio_selectArr.push( this.cart_list[h]._id)
				}
				uni.setStorage({
					key:'radio_selectArr',
					data:JSON.stringify(this.radio_selectArr)
				})
				this.cout_price();
			},
			cout_price(){
				let price = 0;
				for(let i in this.radio_selectArr){
					for(let j in this.cart_list){
						if(this.radio_selectArr[i] == this.cart_list[j]._id){
							price += (parseFloat(this.cart_list[j].product_price) * parseFloat(this.cart_list[j].product_number))
						}
					}
				}
				this.count_price = price;
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			navTo_create(){
				if(!login){
					uni.showModal({
						title:'提示',
						content:'请先登录',
						cancelText:'再等等',
						confirmText:'去登录',
						success(e) {
							if(e.confirm){
								this.navTo('../public/login')	
							}
						}
					})
					return
				}
				if(this.radio_selectArr.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择结算的商品'
					})
					return 
				}
				let arr = [];
				for(let i in this.radio_selectArr){
					for(let j in this.cart_list){
						if(this.radio_selectArr[i] == this.cart_list[j]._id){
							arr.push(this.cart_list[j]);
							continue;
						}
					}
				}
				uni.setStorage({
					key:'order_detail',
					data:JSON.stringify(arr)
				})
				this.navTo('../order/create_order')
			}
		}
	}
</script>

<style lang="scss">
	.bg_title{
		.title{
			width: 100%;
		}
	}
	.login_to{
		width: 100%;
		text-align: center;
		line-height: 600rpx;
		color: #999999;
	}
	page{
		background-color: #f5f5f5;
	}
	.cart{
		width: 100%;
		.list{
			width: 90%;
			padding: 1% 3%;
			margin-left: 2%;
			background-color: #FFFFFF;
			margin-top: 25rpx;
			border-radius: 11rpx;
			.list_title{
				height: 73rpx;
				display: flex;
				.list_title_title{
					width: 80%;
					line-height: 73rpx;
					font-size: 30rpx;
					font-weight: bold;
					font-family: '楷体';
					text{
						font-size: 29rpx;
						color: #999999;
					}
				}
				.list_title_icon{
					width: 20%;
					line-height: 73rpx;
					text-align: right;
					text{
						font-size: 43rpx;
						color: $uni-back-color;
						&:active{
							color: #999999;
						}
					}
				}
			}
			.product{
				width: 100%;
				display: flex;
				.product_radio{
					width: 100rpx;
					text-align: center;
					line-height: 220rpx;
					.radio,
					.radio_active{
						width: 40rpx;
						height: 40rpx;
						border-radius: 35rpx;
						margin-left: 25rpx;
						margin-top: 75rpx;
						border: 1px solid #999999;
					}
					.radio_active{
						background-image: linear-gradient(to right ,#58bfff ,#3c9aff ,#58bfff);
					}
				}
				.product_image{
					margin: 10rpx;
					width: 220rpx;
					height: 220rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 7rpx;
					}
				}
				.product_desc{
					width: calc(100% - 370rpx);
					margin-left: 30rpx;
					.product_desc_name{
						width: 100%;
						height: 73rpx;
						line-height: 73rpx;
						overflow: hidden;
						font-size: 29rpx;
						font-weight: bold;
					}
					.product_list_option{
						width: 100%;
						height: 73rpx;
						line-height: 73rpx;
						color: #999999;
						text{
							background-color: #EEEEEE;
							padding: 5rpx 15rpx;
						}
					}
					
				}
				.product_list_l{
					width: 100%;
					height: 73rpx;
					display: flex;
					.price{
						width: 50%;
						color: $uni-back-color;
						line-height: 73rpx;
						font-weight: bold;
					}
					.product_btn{
						width: 50%;
						height: 73rpx;
						display: flex;
						button,
						input{
							width: 33.3%;
							text-align: center;
							height: 73rpx;
							line-height: 73rpx;
							border: 0;
							border-radius: 0;
							&::after{
								border: 0;
							}
							padding: 0;
							background-color: #FFFFFF;
							&:active{
								background-color: #999999;
							}
						}
						input{
							background-color: #F1F1F1;
							color: #999999;
							&:active{
								color: #000000;
							}
						}
					}
				}
			}
		}
	}
	.toResult{
		width: 100%;
		background-color: #FFFFFF;
		height: 50px;
		position: fixed;
		bottom: 50px;
		display: flex;
		.toResult_all{
			width: 20%;
			line-height: 50px;
			text-align: center;
			font-size: 31rpx;
			color: #007AFF;
			&:active{
				color: #999999;
			}
		}
		.toResult_btn{
			width: 80%;
			display: flex;
			.count{
				line-height: 50px;
				width: 65%;
				padding-right: 5%;
				text-align: right;
				font-size: 31rpx;
				text{
					color: #E81311;
					font-size: 35rpx;
					font-weight: bold;
				}
			}
			.button{
				width: 30%;
				button{
					background-color: $uni-back-color;
					border: 0;
					border-radius: 0;
					height: 50px;
					line-height: 50px;
					&:active{
						background-color: #c14b4b;
					}
				}
			}
		}
	}
</style>
